﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿@using jiuyuan.服务
@using jiuyuan.数据.基础数据类
@using jiuyuan.管理器
@using jiuyuan.数据.共享类

<div class="admin-container">
    <div class="admin-header">
        <h3>游戏元素管理</h3>
        <button class="btn-primary" @onclick="添加新元素">添加新元素</button>
    </div>

    <div class="admin-content">
        @if (!数据已加载)
        {
            <div class="loading">正在加载数据...</div>
        }
        else
        {
            <div class="filters">
                <select @bind="当前筛选类型" class="filter-select">
                    <option value="全部">全部</option>
                    <option value="装备">装备</option>
                    <option value="技能">技能</option>
                    <option value="消耗品">消耗品</option>
                    <option value="货币">货币</option>
                    <option value="材料">材料</option>
                    <option value="任务物品">任务物品</option>
                    <option value="收藏品">收藏品</option>
                    <option value="钥匙">钥匙</option>
                    <option value="特殊道具">特殊道具</option>
                </select>
                <input type="text" @bind="搜索关键词" @oninput="搜索元素" placeholder="搜索元素名称..." class="search-input" />
            </div>

            <div class="item-list">
                @foreach (var 元素 in 显示元素列表)
                {
                    <div class="item-card">
                        <div class="item-info">
                            <div class="item-header">
                                <h4>@元素.名称</h4>
                                <div class="element-badge @元素.类型.ToString().ToLower()">@GetTypeName(元素.类型)</div>
                            </div>
                            <p>等级要求: @元素.等级要求</p>
                            <p>@GetElementDescription(元素)</p>
                            <p class="item-effects">效果数量: @元素.效果列表.Count</p>
                        </div>
                        <div class="item-actions">
                            <button class="action-button view-button" @onclick='() => 查看元素详情(元素)'>查看</button>
                            <button class="action-button edit-button" @onclick='() => 编辑元素(元素)'>编辑</button>
                            <button class="action-button delete-button" @onclick='() => 删除元素(元素.Id)'>删除</button>
                        </div>
                    </div>
                }
            </div>

            @if (!显示元素列表.Any())
            {
                <div class="no-data">
                    @if (!string.IsNullOrEmpty(搜索关键词))
                    {
                        <p>没有找到匹配的元素</p>
                        <button class="btn-secondary" @onclick="清除搜索">清除搜索</button>
                    }
                    else
                    {
                        <p>暂无元素数据</p>
                    }
                </div>
            }
        }
    </div>
</div>

<!-- 元素详情弹窗 -->
<div class="modal" style="display: @(显示详情弹窗 ? "block" : "none");">
    <div class="modal-content large">
        <div class="modal-header">
            <h3>元素详情</h3>
            <button class="close-button" @onclick="关闭详情弹窗">&times;</button>
        </div>
        <div class="modal-body">
            @if (选中的元素 != null)
            {
                <div class="detail-grid">
                    <div class="detail-item">
                        <label>元素名称:</label>
                        <span>@选中的元素.名称</span>
                    </div>
                    <div class="detail-item">
                        <label>元素类型:</label>
                        <span class="element-badge @选中的元素.类型.ToString().ToLower()">@GetTypeName(选中的元素.类型)</span>
                    </div>
                    <div class="detail-item">
                        <label>等级要求:</label>
                        <span>@选中的元素.等级要求</span>
                    </div>
                    
                    <!-- 装备特有属性 -->
                    @if (选中的元素.类型 == 物品类型.装备)
                    {
                        <div class="detail-item">
                            <label>装备槽位:</label>
                            <span>@GetSlotName(选中的元素.装备槽位)</span>
                        </div>
                    }
                    
                    <!-- 技能特有属性 -->
                    @if (选中的元素.类型 == 物品类型.技能)
                    {
                        <div class="detail-item">
                            <label>消耗魔法值:</label>
                            <span>@选中的元素.消耗魔法值</span>
                        </div>
                        <div class="detail-item">
                            <label>冷却时间:</label>
                            <span>@选中的元素.冷却时间 秒</span>
                        </div>
                        <div class="detail-item">
                            <label>目标类型:</label>
                            <span>@GetTargetType(选中的元素.目标类型)</span>
                        </div>
                    }
                    
                    <!-- 消耗品特有属性 -->
                    @if (选中的元素.类型 == 物品类型.消耗品)
                    {
                        <div class="detail-item">
                            <label>使用冷却:</label>
                            <span>@选中的元素.冷却时间 秒</span>
                        </div>
                    }

                    <div class="detail-item">
                        <label>最大堆叠数:</label>
                        <span>@选中的元素.最大堆叠数</span>
                    </div>
                    <div class="detail-item">
                        <label>可装备:</label>
                        <span>@(选中的元素.可装备 ? "是" : "否")</span>
                    </div>
                    <div class="detail-item">
                        <label>可使用:</label>
                        <span>@(选中的元素.可使用 ? "是" : "否")</span>
                    </div>
                    <div class="detail-item">
                        <label>图标:</label>
                        <span>@选中的元素.图标</span>
                    </div>
                    <div class="detail-item full-width">
                        <label>描述:</label>
                        <span>@选中的元素.描述</span>
                    </div>
                    
                    <!-- 基础属性 -->
                    <div class="detail-item full-width">
                        <label>基础属性:</label>
                        <div class="attributes-grid">
                            @if (选中的元素.基础属性 != null)
                            {
                                <div class="attribute-row">
                                    <span>生命值:</span>
                                    <span>@选中的元素.基础属性.生命值</span>
                                </div>
                                <div class="attribute-row">
                                    <span>魔法值:</span>
                                    <span>@选中的元素.基础属性.魔法值</span>
                                </div>
                                <div class="attribute-row">
                                    <span>物理攻击:</span>
                                    <span>@选中的元素.基础属性.物理攻击</span>
                                </div>
                                <div class="attribute-row">
                                    <span>物理防御:</span>
                                    <span>@选中的元素.基础属性.物理防御</span>
                                </div>
                                <div class="attribute-row">
                                    <span>速度:</span>
                                    <span>@选中的元素.基础属性.速度</span>
                                </div>
                            }
                            else
                            {
                                <span class="no-attributes">无基础属性</span>
                            }
                        </div>
                    </div>
                    
                    <!-- 效果列表 -->
                    <div class="detail-item full-width">
                        <label>元素效果:</label>
                        <div class="effects-preview">
                            @if (选中的元素.效果列表.Any())
                            {
                                @foreach (var effect in 选中的元素.效果列表)
                                {
                                    <div class="effect-preview">
                                        <div class="effect-header">
                                            <span class="effect-type">@effect.效果名称</span>
                                            <span class="effect-timing">@GetTriggerTimingName(effect.触发时机)</span>
                                        </div>
                                        <span class="effect-desc">@effect.获取描述()</span>
                                        <span class="effect-probability">触发概率: @(effect.触发概率 * 100)%</span>
                                        @if (effect.持续回合数 > 0)
                                        {
                                            <span class="effect-duration">持续: @effect.持续回合数 回合</span>
                                        }
                                    </div>
                                }
                            }
                            else
                            {
                                <span class="no-effects">无效果</span>
                            }
                        </div>
                    </div>
                    
                    <div class="detail-item">
                        <label>创建时间:</label>
                        <span>@选中的元素.创建时间.ToString("yyyy-MM-dd HH:mm")</span>
                    </div>
                    <div class="detail-item">
                        <label>更新时间:</label>
                        <span>@选中的元素.更新时间.ToString("yyyy-MM-dd HH:mm")</span>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

<!-- 编辑元素弹窗 -->
<div class="modal" style="display: @(显示编辑弹窗 ? "block" : "none");">
    <div class="modal-content large">
        <div class="modal-header">
            <h3>@(IsEditing ? "编辑元素" : "添加新元素")</h3>
            <button class="close-button" @onclick="关闭编辑弹窗">&times;</button>
        </div>
        <div class="modal-body">
            @if (当前元素 != null)
            {
                <div class="form-grid">
                    <!-- 基础信息 -->
                    <div class="form-group">
                        <label for="elementName">元素名称:</label>
                        <input type="text" id="elementName" @bind="当前元素.名称" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="elementType">元素类型:</label>
                        <select id="elementType" @bind="当前元素.类型" class="form-control">
                            <!-- 功能性物品 -->
                            <option value="装备">装备</option>
                            <option value="技能">技能</option>
                            <option value="消耗品">消耗品</option>
                            
                            <!-- 资源类物品 -->
                            <option value="货币">货币</option>
                            <option value="材料">材料</option>
                            <option value="任务物品">任务物品</option>
                            
                            <!-- 特殊物品 -->
                            <option value="收藏品">收藏品</option>
                            <option value="钥匙">钥匙</option>
                            <option value="特殊道具">特殊道具</option>
                        </select>
                    </div>
                    
                    <!-- 通用配置 -->
                    <div class="form-group">
                        <label for="elementLevel">等级要求:</label>
                        <input type="number" id="elementLevel" @bind="当前元素.等级要求" class="form-control" min="0" max="100" />
                    </div>
                    <div class="form-group">
                        <label for="elementMaxStack">最大堆叠数:</label>
                        <input type="number" id="elementMaxStack" @bind="当前元素.最大堆叠数" 
                               min="1" max="@GetMaxStackLimit(当前元素.类型)" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="elementIcon">图标:</label>
                        <input type="text" id="elementIcon" @bind="当前元素.图标" class="form-control" placeholder="图标路径或标识" />
                    </div>
                    <div class="form-group full-width">
                        <label for="elementDescription">描述:</label>
                        <textarea id="elementDescription" @bind="当前元素.描述" class="form-control" rows="3" placeholder="元素描述..."></textarea>
                    </div>

                    <!-- 使用配置 -->
                    <div class="form-group">
                        <label for="elementEquipable">可装备:</label>
                        <input type="checkbox" id="elementEquipable" @bind="当前元素.可装备" class="form-check" />
                    </div>
                    <div class="form-group">
                        <label for="elementUsable">可使用:</label>
                        <input type="checkbox" id="elementUsable" @bind="当前元素.可使用" class="form-check" />
                    </div>
                    
                    <!-- 装备特有配置 -->
                    @if (当前元素.类型 == 物品类型.装备)
                    {
                        <div class="form-group">
                            <label for="elementSlot">装备槽位:</label>
                            <select id="elementSlot" @bind="当前元素.装备槽位" class="form-control">
                                <option value="武器">武器</option>
                                <option value="头盔">头盔</option>
                                <option value="胸甲">胸甲</option>
                                <option value="护腿">护腿</option>
                                <option value="靴子">靴子</option>
                                <option value="饰品">饰品</option>
                            </select>
                        </div>
                    }
                    
                    <!-- 技能特有配置 -->
                    @if (当前元素.类型 == 物品类型.技能)
                    {
                        <div class="form-group">
                            <label for="skillManaCost">消耗魔法值:</label>
                            <input type="number" id="skillManaCost" @bind="当前元素.消耗魔法值" class="form-control" min="0" max="1000" />
                        </div>
                        <div class="form-group">
                            <label for="skillCooldown">冷却时间(秒):</label>
                            <input type="number" id="skillCooldown" @bind="当前元素.冷却时间" class="form-control" min="0" max="3600" />
                        </div>
                        <div class="form-group">
                            <label for="skillTargetType">目标类型:</label>
                            <select id="skillTargetType" @bind="当前元素.目标类型" class="form-control">
                                <option value="自身">自身</option>
                                <option value="友方单体">友方单体</option>
                                <option value="友方群体">友方群体</option>
                                <option value="敌方单体">敌方单体</option>
                                <option value="敌方群体">敌方群体</option>
                            </select>
                        </div>
                    }
                    
                    <!-- 消耗品配置 -->
                    @if (当前元素.类型 == 物品类型.消耗品)
                    {
                        <div class="form-group">
                            <label for="consumableCooldown">使用冷却(秒):</label>
                            <input type="number" id="consumableCooldown" @bind="当前元素.冷却时间" class="form-control" min="0" max="3600" />
                        </div>
                    }

                    <!-- 基础属性配置 -->
                    <div class="form-group full-width">
                        <label>基础属性:</label>
                        <div class="attributes-editor">
                            <div class="attribute-editor-grid">
                                <div class="attribute-editor-item">
                                    <label>生命值:</label>
                                    <input type="number" @bind="当前元素.基础属性.生命值" class="form-control small" min="0" max="10000" />
                                </div>
                                <div class="attribute-editor-item">
                                    <label>魔法值:</label>
                                    <input type="number" @bind="当前元素.基础属性.魔法值" class="form-control small" min="0" max="10000" />
                                </div>
                                <div class="attribute-editor-item">
                                    <label>物理攻击:</label>
                                    <input type="number" @bind="当前元素.基础属性.物理攻击" class="form-control small" min="0" max="1000" />
                                </div>
                                <div class="attribute-editor-item">
                                    <label>物理防御:</label>
                                    <input type="number" @bind="当前元素.基础属性.物理防御" class="form-control small" min="0" max="1000" />
                                </div>
                                <div class="attribute-editor-item">
                                    <label>速度:</label>
                                    <input type="number" @bind="当前元素.基础属性.速度" class="form-control small" min="0" max="1000" />
                                </div>
                                <div class="attribute-editor-item">
                                    <label>幸运值:</label>
                                    <input type="number" @bind="当前元素.基础属性.幸运值" class="form-control small" min="0" max="100" />
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 效果配置区域 -->
                    @if (当前元素.类型 == 物品类型.技能 || 当前元素.类型 == 物品类型.消耗品 || 当前元素.类型 == 物品类型.装备 || 当前元素.类型 == 物品类型.特殊道具)
                    {
                        <div class="form-group full-width">
                            <label>元素效果:</label>
                            <div class="effects-container">
                                <div class="effects-header">
                                    <span>效果列表</span>
                                    <button type="button" class="btn-secondary small" @onclick="添加效果">添加效果</button>
                                </div>
                                
                                @if (当前元素.效果列表.Any())
                                {
                                    @foreach (var effect in 当前元素.效果列表)
                                    {
                                        <div class="effect-item">
                                            <div class="effect-header">
                                                @* <select @bind="effect.效果类型名称" class="form-control">
                                                    <option value="属性加成效果">属性加成</option>
                                                    <option value="触发技能效果">触发技能</option>
                                                    <option value="状态效果">状态效果</option>
                                                    <option value="特殊效果">特殊效果</option>
                                                </select> *@
                                                <select @bind="effect.触发时机" class="form-control">
                                                    <option value="立即触发">立即触发</option>
                                                    <option value="回合开始">回合开始</option>
                                                    <option value="战斗开始">战斗开始</option>
                                                    <option value="攻击时">攻击时</option>
                                                    <option value="受击时">受击时</option>
                                                    <option value="装备时">装备时</option>
                                                    <option value="卸下时">卸下时</option>
                                                    <option value="常驻效果">常驻效果</option>
                                                </select>
                                                <input type="range" @bind="effect.触发概率" class="form-range" step="0.01" min="0" max="1" />
                                                <span>@(effect.触发概率 * 100)%</span>
                                                <button type="button" class="btn-danger small" @onclick="() => 移除效果(effect)">移除</button>
                                            </div>
                                            
                                            <div class="effect-params">
                                                @if (effect is 属性加成效果 属性效果)
                                                {
                                                    <div class="param-group">
                                                        <label>属性加成:</label>
                                                        <div class="attribute-params">
                                                            <div class="attribute-param">
                                                                <label>生命值:</label>
                                                                <input type="number" @bind="属性效果.参数[生命值键]" class="form-control tiny" />
                                                            </div>
                                                            <div class="attribute-param">
                                                                <label>魔法值:</label>
                                                                <input type="number" @bind="属性效果.参数[魔法值键]" class="form-control tiny" />
                                                            </div>
                                                            <div class="attribute-param">
                                                                <label>物理攻击:</label>
                                                                <input type="number" @bind="属性效果.参数[物理攻击键]" class="form-control tiny" />
                                                            </div>
                                                            <div class="attribute-param">
                                                                <label>物理防御:</label>
                                                                <input type="number" @bind="属性效果.参数[物理防御键]" class="form-control tiny" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                }
                                                else if (effect is 触发技能效果 触发效果)
                                                {
                                                    <div class="param-group">
                                                        <label>技能名称:</label>
                                                        <input type="text" @bind="触发效果.参数[技能名称键]" class="form-control small" placeholder="技能名称" />
                                                    </div>
                                                    <div class="param-group">
                                                        <label>伤害值:</label>
                                                        <input type="number" @bind="触发效果.参数[伤害值键]" class="form-control small" min="0" />
                                                    </div>
                                                    <div class="param-group">
                                                        <label>治疗量:</label>
                                                        <input type="number" @bind="触发效果.参数[治疗量键]" class="form-control small" min="0" />
                                                    </div>
                                                }
                                                else if (effect is 状态效果 状态效果实例)
                                                {
                                                    <div class="param-group">
                                                        <label>状态类型:</label>
                                                        <input type="text" @bind="状态效果实例.参数[状态类型键]" class="form-control small" placeholder="状态类型" />
                                                    </div>
                                                    <div class="param-group">
                                                        <label>持续回合数:</label>
                                                        <input type="number" @bind="状态效果实例.持续回合数" class="form-control small" min="1" max="10" />
                                                    </div>
                                                }
                                            </div>
                                        </div>
                                    }
                                }
                                else
                                {
                                    <div class="no-effects">暂无效果，点击"添加效果"按钮添加</div>
                                }
                            </div>
                        </div>
                    }
                    else
                    {
                        <div class="form-group full-width">
                            <label>元素效果:</label>
                            <div class="info-message">
                                该物品类型不支持效果配置
                            </div>
                        </div>
                    }
                </div>
                <div class="btn-group">
                    <button class="btn-primary" @onclick="保存元素">@(!IsEditing ? "添加" : "更新")</button>
                    <button class="btn-secondary" @onclick="关闭编辑弹窗">取消</button>
                </div>
            }
        </div>
    </div>
</div>

<style>
    .admin-container {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .admin-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #4a2c8d;
    }

    .admin-content {
        flex: 1;
        overflow-y: auto;
    }

    .filters {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
        align-items: center;
    }

    .filter-select {
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        color: #e0e0ff;
        padding: 8px 12px;
        font-size: 1rem;
        min-width: 150px;
    }

    .search-input {
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        color: #e0e0ff;
        padding: 8px 12px;
        font-size: 1rem;
        flex: 1;
        max-width: 300px;
    }

    .search-input:focus {
        outline: none;
        border-color: #6a0dad;
        box-shadow: 0 0 10px rgba(106, 13, 173, 0.5);
    }

    .item-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 20px;
    }

    .item-card {
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 8px;
        padding: 20px;
        transition: all 0.3s ease;
    }

    .item-card:hover {
        background-color: rgba(40, 40, 80, 0.9);
        border-color: #6a0dad;
        box-shadow: 0 0 15px rgba(106, 13, 173, 0.5);
    }

    .item-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .item-header h4 {
        color: #b19cd9;
        margin: 0;
        font-size: 1.2rem;
        flex: 1;
        margin-right: 10px;
    }

    .item-info p {
        color: #a0a0e0;
        margin: 5px 0;
        font-size: 0.9rem;
    }

    .item-effects {
        color: #888 !important;
        font-style: italic;
    }

    .item-actions {
        display: flex;
        gap: 10px;
        margin-top: 15px;
        justify-content: flex-end;
    }

    /* 元素类型徽章样式 */
    .element-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .element-badge.装备 {
        background-color: #4a2c8d;
        color: #b19cd9;
        border: 1px solid #6a0dad;
    }

    .element-badge.技能 {
        background-color: #2c8d4a;
        color: #9cd9b1;
        border: 1px solid #4acf7a;
    }

    .element-badge.消耗品 {
        background-color: #8d4a2c;
        color: #d9b19c;
        border: 1px solid #cf7a4a;
    }

    .element-badge.货币 {
        background-color: #8d8d2c;
        color: #d9d99c;
        border: 1px solid #cfcf4a;
    }

    .element-badge.材料 {
        background-color: #2c4a8d;
        color: #9cb1d9;
        border: 1px solid #4a7acf;
    }

    .element-badge.任务物品 {
        background-color: #8d2c6a;
        color: #d99cc4;
        border: 1px solid #cf4a9e;
    }

    .element-badge.收藏品 {
        background-color: #2c8d8d;
        color: #9cd9d9;
        border: 1px solid #4acfcf;
    }

    .element-badge.钥匙 {
        background-color: #8d6a2c;
        color: #d9c49c;
        border: 1px solid #cf9e4a;
    }

    .element-badge.特殊道具 {
        background-color: #6a2c8d;
        color: #c49cd9;
        border: 1px solid #9e4acf;
    }

    /* 属性编辑器样式 */
    .attributes-editor {
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        padding: 15px;
        background-color: rgba(30, 30, 60, 0.5);
    }

    .attribute-editor-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
    }

    .attribute-editor-item {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .attribute-editor-item label {
        color: #a0a0e0;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .attributes-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
        margin-top: 5px;
    }

    .attribute-row {
        display: flex;
        justify-content: space-between;
        padding: 5px 10px;
        background-color: rgba(30, 30, 60, 0.8);
        border-radius: 3px;
    }

    .attribute-row span:first-child {
        color: #a0a0e0;
    }

    .attribute-row span:last-child {
        color: #e0e0ff;
        font-weight: 500;
    }

    .no-attributes {
        color: #888;
        font-style: italic;
        text-align: center;
        padding: 10px;
    }

    /* 效果预览样式 */
    .effects-preview {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 5px;
    }

    .effect-preview {
        padding: 10px;
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
    }

    .effect-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
    }

    .effect-type {
        color: #b19cd9;
        font-weight: 500;
    }

    .effect-timing {
        color: #888;
        font-size: 0.8rem;
        font-style: italic;
    }

    .effect-desc {
        color: #a0a0e0;
        font-size: 0.9rem;
        display: block;
        margin-bottom: 3px;
    }

    .effect-probability, .effect-duration {
        color: #888;
        font-size: 0.8rem;
        margin-right: 10px;
    }

    .no-effects {
        color: #666;
        font-style: italic;
        text-align: center;
        padding: 20px;
    }

    /* 效果编辑器样式 */
    .effects-container {
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        padding: 15px;
        background-color: rgba(30, 30, 60, 0.5);
    }

    .effects-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #4a2c8d;
    }

    .effects-header span {
        color: #b19cd9;
        font-weight: 500;
    }

    .effect-item {
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 15px;
        background-color: rgba(40, 40, 80, 0.8);
    }

    .effect-header {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }

    .effect-header select {
        flex: 1;
        min-width: 120px;
    }

    .form-range {
        flex: 2;
        min-width: 100px;
    }

    .effect-params {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
        padding: 10px;
        background-color: rgba(30, 30, 60, 0.5);
        border-radius: 5px;
    }

    .param-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .param-group label {
        color: #a0a0e0;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .attribute-params {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .attribute-param {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .attribute-param label {
        font-size: 0.8rem;
    }

    .info-message {
        text-align: center;
        padding: 20px;
        color: #888;
        font-style: italic;
        background-color: rgba(30, 30, 60, 0.5);
        border-radius: 5px;
    }

    /* 按钮和表单样式（保持原有样式） */
    .action-button {
        padding: 8px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.9rem;
    }

    .view-button {
        background-color: rgba(30, 60, 120, 0.8);
        color: #a0c0ff;
    }

    .view-button:hover {
        background-color: rgba(40, 80, 160, 0.9);
        box-shadow: 0 0 10px rgba(64, 128, 255, 0.5);
    }

    .edit-button {
        background-color: rgba(60, 120, 60, 0.8);
        color: #a0ffa0;
    }

    .edit-button:hover {
        background-color: rgba(80, 160, 80, 0.9);
        box-shadow: 0 0 10px rgba(128, 255, 128, 0.5);
    }

    .delete-button {
        background-color: rgba(120, 60, 60, 0.8);
        color: #ffa0a0;
    }

    .delete-button:hover {
        background-color: rgba(160, 80, 80, 0.9);
        box-shadow: 0 0 10px rgba(255, 128, 128, 0.5);
    }

    .btn-primary {
        padding: 10px 20px;
        background: linear-gradient(to right, #4a2c8d, #6a0dad);
        border: none;
        border-radius: 5px;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
    }

    .btn-primary:hover {
        background: linear-gradient(to right, #5a3c9d, #7a1ddd);
        box-shadow: 0 0 15px rgba(106, 13, 173, 0.7);
    }

    .btn-secondary {
        padding: 10px 20px;
        background: linear-gradient(to right, #3a3a5a, #5a5a7a);
        border: none;
        border-radius: 5px;
        color: #e0e0ff;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
    }

    .btn-secondary:hover {
        background: linear-gradient(to right, #4a4a6a, #6a6a8a);
        box-shadow: 0 0 15px rgba(90, 90, 122, 0.7);
    }

    .btn-danger {
        background-color: rgba(160, 60, 60, 0.8);
        color: #ffa0a0;
        border: none;
        border-radius: 3px;
        padding: 5px 10px;
        cursor: pointer;
        font-size: 0.8rem;
    }

    .btn-danger:hover {
        background-color: rgba(180, 80, 80, 0.9);
    }

    .small {
        padding: 5px 10px;
        font-size: 0.8rem;
    }

    .btn-group {
        display: flex;
        gap: 15px;
        margin-top: 20px;
        justify-content: flex-end;
    }

    .loading {
        text-align: center;
        padding: 30px;
        color: #a0a0e0;
        font-size: 1.2rem;
    }

    .no-data {
        text-align: center;
        padding: 40px;
        color: #a0a0e0;
    }

    .no-data p {
        margin-bottom: 15px;
        font-size: 1.1rem;
    }

    /* 弹窗样式 */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        background-color: rgba(20, 20, 40, 0.95);
        border: 2px solid #4a2c8d;
        border-radius: 10px;
        width: 90%;
        max-width: 800px;
        max-height: 90%;
        overflow-y: auto;
        box-shadow: 0 0 30px rgba(106, 13, 173, 0.8);
    }

    .modal-content.large {
        max-width: 1000px;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #4a2c8d;
    }

    .modal-header h3 {
        color: #b19cd9;
        margin: 0;
    }

    .close-button {
        background: none;
        border: none;
        color: #b19cd9;
        font-size: 1.8rem;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .close-button:hover {
        color: #ff5555;
    }

    .modal-body {
        padding: 20px;
    }

    /* 表单样式 */
    .form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        color: #a0a0e0;
        font-weight: 500;
    }

    .form-control {
        width: 100%;
        padding: 10px;
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        color: #e0e0ff;
        font-size: 1rem;
    }

    .form-control:focus {
        outline: none;
        border-color: #6a0dad;
        box-shadow: 0 0 10px rgba(106, 13, 173, 0.5);
    }

    .form-control.small {
        padding: 8px;
        font-size: 0.9rem;
    }

    .form-control.tiny {
        padding: 5px;
        font-size: 0.8rem;
    }

    textarea.form-control {
        resize: vertical;
        min-height: 80px;
    }

    select.form-control {
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 15px;
    }

    .form-check {
        width: 20px;
        height: 20px;
        margin: 0;
    }

    .form-range {
        width: 100%;
        height: 5px;
        background: rgba(30, 30, 60, 0.8);
        border-radius: 5px;
        outline: none;
    }

    .form-range::-webkit-slider-thumb {
        appearance: none;
        width: 15px;
        height: 15px;
        background: #6a0dad;
        border-radius: 50%;
        cursor: pointer;
    }

    /* 详情样式 */
    .detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    .detail-item {
        margin-bottom: 15px;
    }

    .detail-item.full-width {
        grid-column: 1 / -1;
    }

    .detail-item label {
        display: block;
        color: #a0a0e0;
        font-weight: 500;
        margin-bottom: 5px;
    }

    .detail-item span {
        display: block;
        color: #e0e0ff;
        padding: 8px;
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
    }
</style>

@code {
    [Inject] public 配置加载器 配置加载器 { get; set; } = default!;
    [Inject] public 元素管理器 元素管理器 { get; set; } = default!;
    [Inject] public ILogger<元素管理> Logger { get; set; } = default!;

    private List<游戏元素> 元素列表 = new();
    private List<游戏元素> 显示元素列表 = new();
    private bool 数据已加载 = false;
    private string 当前筛选类型 = "全部";
    private string 搜索关键词 = "";

    private 游戏元素 当前元素 = new 游戏元素();
    private 游戏元素 选中的元素 = new 游戏元素();
    private bool IsEditing = false;
    private Guid 编辑中的元素Id = Guid.Empty;
    private bool 显示详情弹窗 = false;
    private bool 显示编辑弹窗 = false;

    // 定义键名常量
    private const string 生命值键 = "生命值";
    private const string 魔法值键 = "魔法值";
    private const string 物理攻击键 = "物理攻击";
    private const string 物理防御键 = "物理防御";
    private const string 技能名称键 = "技能名称";
    private const string 伤害值键 = "伤害值";
    private const string 治疗量键 = "治疗量";
    private const string 状态类型键 = "状态类型";

    protected override async Task OnInitializedAsync()
    {
        await 加载元素数据();
    }

    private async Task 加载元素数据()
    {
        try
        {
            元素列表 = 元素管理器.获取所有元素();
            显示元素列表 = 元素列表;
            数据已加载 = true;
            StateHasChanged();
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "加载元素数据时发生错误");
        }
    }

    private void 筛选元素()
    {
        if (当前筛选类型 == "全部")
        {
            显示元素列表 = 元素列表;
        }
        else
        {
            var 类型枚举 = Enum.Parse<物品类型>(当前筛选类型);
            显示元素列表 = 元素列表.Where(e => e.类型 == 类型枚举).ToList();
        }

        if (!string.IsNullOrEmpty(搜索关键词))
        {
            显示元素列表 = 显示元素列表.Where(e => e.名称.Contains(搜索关键词, StringComparison.OrdinalIgnoreCase)).ToList();
        }
    }

    private void 搜索元素()
    {
        筛选元素();
    }

    private void 清除搜索()
    {
        搜索关键词 = "";
        筛选元素();
    }

    private string GetTypeName(物品类型 类型)
    {
        return 类型 switch
        {
            物品类型.装备 => "装备",
            物品类型.技能 => "技能", 
            物品类型.消耗品 => "消耗品",
            物品类型.货币 => "货币",
            物品类型.材料 => "材料",
            物品类型.任务物品 => "任务物品",
            物品类型.收藏品 => "收藏品",
            物品类型.钥匙 => "钥匙",
            物品类型.特殊道具 => "特殊道具",
            _ => "未知"
        };
    }

    private string GetElementDescription(游戏元素 元素)
    {
        return 元素.类型 switch
        {
            物品类型.装备 => $"槽位: {GetSlotName(元素.装备槽位)}",
            物品类型.技能 => $"消耗: {元素.消耗魔法值}魔法, 冷却: {元素.冷却时间}秒",
            物品类型.消耗品 => $"冷却: {元素.冷却时间}秒",
            物品类型.货币 => $"堆叠: {元素.最大堆叠数}",
            物品类型.材料 => $"堆叠: {元素.最大堆叠数}",
            物品类型.任务物品 => $"任务物品",
            物品类型.收藏品 => $"收藏品",
            物品类型.钥匙 => $"钥匙",
            物品类型.特殊道具 => $"特殊道具",
            _ => ""
        };
    }

    private string GetSlotName(装备槽位? 槽位)
    {
        if (!槽位.HasValue) return "未知";
        return 槽位.Value switch
        {
            装备槽位.武器 => "武器",
            装备槽位.头盔 => "头盔", 
            装备槽位.胸甲 => "胸甲",
            装备槽位.护腿 => "护腿",
            装备槽位.靴子 => "靴子",
            装备槽位.饰品 => "饰品",
            _ => "未知"
        };
    }

    private string GetTargetType(技能目标类型 目标类型)
    {
        return 目标类型 switch
        {
            技能目标类型.自身 => "自身",
            技能目标类型.友方单体 => "友方单体", 
            技能目标类型.友方群体 => "友方群体",
            技能目标类型.敌方单体 => "敌方单体",
            技能目标类型.敌方群体 => "敌方群体",
            _ => "未知"
        };
    }

    private string GetTriggerTimingName(效果触发时机 触发时机)
    {
        return 触发时机 switch
        {
            效果触发时机.立即触发 => "立即",
            效果触发时机.回合开始 => "回合开始",
            效果触发时机.攻击时 => "攻击时",
            效果触发时机.受击时 => "受击时",
            效果触发时机.装备时 => "装备时",
            效果触发时机.卸下时 => "卸下时",
            效果触发时机.常驻效果 => "常驻",
            _ => "未知"
        };
    }

    private int GetMaxStackLimit(物品类型 类型)
    {
        return 类型 switch
        {
            物品类型.货币 => int.MaxValue,
            物品类型.材料 => 9999,
            物品类型.任务物品 => 1,
            物品类型.收藏品 => 1,
            _ => 999
        };
    }

    private void 查看元素详情(游戏元素 元素)
    {
        选中的元素 = 元素;
        显示详情弹窗 = true;
    }

    private void 关闭详情弹窗()
    {
        显示详情弹窗 = false;
    }

    private void 添加新元素()
    {
        当前元素 = new 游戏元素
        {
            Id = Guid.NewGuid(),
            创建时间 = DateTime.Now,
            更新时间 = DateTime.Now,
            基础属性 = new 属性配置(),
            效果列表 = new List<技能效果>(),
            最大堆叠数 = 1
        };
        IsEditing = false;
        编辑中的元素Id = Guid.Empty;
        显示编辑弹窗 = true;
    }

    private void 编辑元素(游戏元素 元素)
    {
        // 深拷贝元素对象
        当前元素 = new 游戏元素
        {
            Id = 元素.Id,
            名称 = 元素.名称,
            描述 = 元素.描述,
            图标 = 元素.图标,
            类型 = 元素.类型,
            等级要求 = 元素.等级要求,
            基础属性 = 元素.基础属性?.深拷贝() ?? new 属性配置(),
            效果列表 = 元素.效果列表.Select(e => e.深拷贝()).ToList(),
            可装备 = 元素.可装备,
            可使用 = 元素.可使用,
            装备槽位 = 元素.装备槽位,
            最大堆叠数 = 元素.最大堆叠数,
            冷却时间 = 元素.冷却时间,
            消耗魔法值 = 元素.消耗魔法值,
            目标类型 = 元素.目标类型,
            创建时间 = 元素.创建时间,
            更新时间 = DateTime.Now
        };
        
        IsEditing = true;
        编辑中的元素Id = 元素.Id;
        显示编辑弹窗 = true;
    }

    private void 关闭编辑弹窗()
    {
        显示编辑弹窗 = false;
    }

    private async Task 删除元素(Guid 元素Id)
    {
        await 元素管理器.删除元素配置(元素Id);
        await 加载元素数据();
    }

    private void 元素类型改变()
    {
        // 根据类型设置默认值
        switch (当前元素.类型)
        {
            case 物品类型.装备:
                当前元素.可装备 = true;
                当前元素.可使用 = false;
                当前元素.最大堆叠数 = 1;
                当前元素.装备槽位 = 装备槽位.武器;
                break;
                
            case 物品类型.技能:
                当前元素.可装备 = false;
                当前元素.可使用 = true;
                当前元素.最大堆叠数 = 1;
                当前元素.消耗魔法值 = 10;
                当前元素.冷却时间 = 5;
                当前元素.目标类型 = 技能目标类型.敌方单体;
                break;
                
            case 物品类型.消耗品:
                当前元素.可装备 = false;
                当前元素.可使用 = true;
                当前元素.最大堆叠数 = 99;
                当前元素.冷却时间 = 0;
                break;
                
            case 物品类型.货币:
                当前元素.可装备 = false;
                当前元素.可使用 = false;
                当前元素.最大堆叠数 = int.MaxValue;
                break;
                
            case 物品类型.材料:
                当前元素.可装备 = false;
                当前元素.可使用 = false;
                当前元素.最大堆叠数 = 9999;
                break;
                
            case 物品类型.任务物品:
                当前元素.可装备 = false;
                当前元素.可使用 = false;
                当前元素.最大堆叠数 = 1;
                break;
                
            case 物品类型.收藏品:
                当前元素.可装备 = false;
                当前元素.可使用 = false;
                当前元素.最大堆叠数 = 1;
                break;
                
            case 物品类型.钥匙:
                当前元素.可装备 = false;
                当前元素.可使用 = true;
                当前元素.最大堆叠数 = 1;
                break;
                
            case 物品类型.特殊道具:
                当前元素.可装备 = false;
                当前元素.可使用 = true;
                当前元素.最大堆叠数 = 1;
                break;
        }
        
        StateHasChanged();
    }

    private void 添加效果()
    {
        var 新效果 = new 属性加成效果()
        {
            效果名称 = "新效果",
            触发时机 = 效果触发时机.立即触发,
            触发概率 = 1.0f,
            参数 = new Dictionary<string, object>
            {
                ["生命值"] = 0,
                ["魔法值"] = 0,
                ["物理攻击"] = 0,
                ["物理防御"] = 0
            }
        };
        
        当前元素.效果列表.Add(新效果);
        StateHasChanged();
    }

    private void 移除效果(技能效果 效果)
    {
        当前元素.效果列表.Remove(效果);
        StateHasChanged();
    }

    private void 效果类型改变(技能效果 效果)
    {
        var 效果列表 = 当前元素.效果列表.ToList();
        var index = 效果列表.IndexOf(效果);
        if (index >= 0)
        {
            技能效果 新效果;
            
            switch (效果.效果类型名称)
            {
                case "属性加成效果":
                    新效果 = new 属性加成效果 
                    { 
                        Id = 效果.Id,
                        效果名称 = "属性加成",
                        参数 = new Dictionary<string, object>
                        {
                            ["生命值"] = 0,
                            ["魔法值"] = 0,
                            ["物理攻击"] = 0,
                            ["物理防御"] = 0
                        }
                    };
                    break;
                case "触发技能":
                    新效果 = new 触发技能效果 
                    { 
                        Id = 效果.Id,
                        效果名称 = "触发技能",
                        参数 = new Dictionary<string, object>
                        {
                            ["效果类型"] = "伤害",
                            ["伤害值"] = 0
                        }
                    };
                    break;
                case "状态效果":
                    新效果 = new 状态效果 
                    { 
                        Id = 效果.Id,
                        效果名称 = "状态效果",
                        参数 = new Dictionary<string, object>
                        {
                            ["生命值加成"] = 0,
                            ["魔法值加成"] = 0,
                            ["物理攻击加成"] = 0,
                            ["物理防御加成"] = 0,
                            ["持续回合"] = 3
                        }
                    };
                    break;
                case "特殊效果":
                    // 创建一个默认的效果配置用于动态伤害效果
                    var 默认配置 = new 效果配置 
                    { 
                        Id = Guid.NewGuid(),
                        名称 = "特殊效果",
                        效果类型 = "动态伤害效果",
                        参数 = new Dictionary<string, object>()
                    };
                    新效果 = new jiuyuan.管理器.动态伤害效果(默认配置, Logger) // 使用正确的构造函数
                    { 
                        Id = 效果.Id,
                        效果名称 = "特殊效果",
                        参数 = new Dictionary<string, object>()
                    };
                    break;
                default:
                    新效果 = new 属性加成效果 { Id = 效果.Id, 效果名称 = "属性加成" };
                    break;
            }
            
            新效果.触发时机 = 效果.触发时机;
            新效果.触发概率 = 效果.触发概率;
            
            // 移除旧效果并添加新效果
            当前元素.效果列表.Remove(效果);
            当前元素.效果列表.Add(新效果);
            StateHasChanged();
        }
    }

    private async Task 保存元素()
    {
        if (string.IsNullOrWhiteSpace(当前元素.名称))
        {
            // 可以添加错误提示
            return;
        }

        try
        {
            当前元素.更新时间 = DateTime.Now;
            
            if (当前元素.创建时间 == DateTime.MinValue)
            {
                当前元素.创建时间 = DateTime.Now;
            }

            await 元素管理器.保存元素配置(当前元素);
            显示编辑弹窗 = false;
            await 加载元素数据();
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "保存元素时发生错误");
        }
    }
}